<!-- 用户管理 -->
<template>
  <div>
    <h1>个人信息</h1>
    <div>
      <div class="h-full2">
        <div>
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="头像">
              <el-input v-model="form.avatar" :disabled="true" />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" :disabled="true" />
            </el-form-item>
            <el-form-item label="vip等级">
              <el-input v-model="form.vip" :disabled="true" />
            </el-form-item>
            <el-form-item label="经验">
              <el-input v-model="form.exp" :disabled="true" />
            </el-form-item>
            <el-form-item label="硬币">
              <el-input v-model="form.coin" :disabled="true" />
            </el-form-item>
            <el-form-item label="用户邮箱">
              <el-input v-model="form.email" :disabled="true" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <el-button type="primary" @click="dialogVisible = true">
      修改个人信息
    </el-button>
    <el-dialog v-model="dialogVisible" @closed="resetForm" width="30%">
      <el-form
        ref="formRef"
        :model="user"
        label-width="100px"
        label-position="left"
      >
        <el-form-item prop="head" label="头像">
          <el-upload
            ref="headRef"
            class="upload-demo"
            action="/api/edu/upload"
            name="file"
            :limit="1"
            :show-file-list="false"
            :on-success="handlerUploadSuccess"
          >
            <el-button type="primary">请选择头像</el-button>
            <el-avatar
              :src="`http://localhost:8080/api/images/${user.avatar}`"
            />
          </el-upload>
        </el-form-item>
        <el-form-item label="头像">
          <el-input v-model="user.avatar" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="user.nickname" />
        </el-form-item>
        <el-form-item label="vip等级">
          <el-input v-model="user.vip" />
        </el-form-item>
        <el-form-item label="经验">
          <el-input v-model="user.exp" />
        </el-form-item>
        <el-form-item label="硬币">
          <el-input v-model="user.coin" />
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="user.email" :disabled="true" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleCreateOrUpdate"
          :loading="loading"
        >
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { cloneDeep } from "lodash";

defineOptions({
  name: "User",
  inheritAttrs: false,
});

import { findAll, update } from "@/api/inforamation";
import { FormInstance } from "element-plus";
import { SysUser } from "@/types/SysUser";

const loading = ref(false);
//列表中的数据集合
const tableData = ref();
//是否显示 添加/编辑 框
const dialogVisible = ref<boolean>(false);

const user = ref<SysUser>();
//双向绑定的对象
const formData = ref(cloneDeep(user));

const tableRef = ref();

//获取 添加/编辑 页面中的表单
const formRef = ref<FormInstance | null>(null);
//重置表单内容
const resetForm = () => {
  formRef.value?.clearValidate();
  formData.value = cloneDeep(reactive);
};

function change(form: any) {
  user.value = JSON.parse(JSON.stringify(form));
  form.avatar = user.value.avatar;
  form.nickname = user.value.nickname;
  form.vip = user.value.vip;
  form.exp = user.value.exp;
  form.coin = user.value.coin;
  form.email = user.value.email;
  return form;
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  findAll()
    .then((res) => {
      user.value = res;
      form.avatar = user.value.avatar;
      form.nickname = user.value.nickname;
      form.vip = user.value.vip;
      form.exp = user.value.exp;
      form.coin = user.value.coin;
      form.email = user.value.email;
    })
    .finally(() => {
      loading.value = false;
    });
}

const headRef = ref();
const handlerUploadSuccess = (res: any) => {
  console.log(res);
  formData.value = res;
  headRef.value.clearFiles();
};

const form = reactive({
  avatar: "",
  nickname: "",
  vip: "",
  exp: "",
  coin: "",
  email: "",
});

//修改框中，“确定”按钮绑定的事件
const handleCreateOrUpdate = () => {
  formRef.value?.validate((valid: boolean, fields) => {
    loading.value = true;
    console.log("aaa", user.value);
    update(user.value)
      .then(() => {
        ElMessage.success("操作成功");
        window.location.reload();
        dialogVisible.value = false;
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

const onSubmit = () => {
  console.log("submit!");
};

onMounted(() => {
  handleQuery();
  form;
  user;
  onSubmit;
  change(form);
});
</script>
